<template>
  <el-dialog
    v-model="_visible"
    :close-on-click-modal="false"
    :width="width"
    :class="customClass"
    :title="title"
    v-bind="$attrs"
    @open="open"
    @close="close"
  >
    <template v-if="showCustomHeader" #header>
      <h4>{{ title }}</h4>
    </template>
    <template #default>
      <div v-loading="loading" class="dialog-content">
        <div class="dialog-body">
          <slot></slot>
        </div>
      </div>
    </template>
    <template v-if="showFooter" #footer>
      <div class="btn-operators">
        <el-button v-if="showCancel" type="default" @click="cancel">{{ cancelText }}</el-button>
        <el-button v-if="showReset" type="primary" @click="reset">重置</el-button>
        <el-button v-if="showConfirm" type="primary" :loading="saveLoading" @click="onSubmit">{{
          saveLoading ? '' : confirmText
        }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  customClass: {
    type: String,
    default: '',
  },
  width: {
    type: [String, Number],
    default: 500,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  saveLoading: {
    type: Boolean,
    default: false,
  },
  showCancel: {
    type: Boolean,
    default: true,
  },
  showConfirm: {
    type: Boolean,
    default: true,
  },
  showReset: {
    type: Boolean,
    default: false,
  },
  showCustomHeader: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  confirmText: {
    type: String,
    default: '确定',
  },
  cancelText: {
    type: String,
    default: '取消',
  },
})

const emits = defineEmits(['update:visible', 'close', 'cancel', 'reset', 'confirm', 'open'])

const _visible: any = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})

const open = (fn: any) => {
  emits('open', fn)
}

const close = () => {
  emits('close')
}

const cancel = () => {
  emits('cancel')
}

const reset = () => {
  emits('reset')
}

const onSubmit = () => {
  emits('confirm')
}
</script>
